<template>
	<view class="addTeam-container">
		<view class="team-container">
			<uni-search-bar placeholder="搜索" :radius="100" :bgColor="bgColor" @confirm="search" @cancel="cancel"></uni-search-bar>
		</view>
		<view class="team-nav">
			<image src="../../static/images/scan-team.png"></image>
			<view class="team-nav_right" @click="qrCode()">
				<view>扫一扫</view>
				<view>扫描二维码添加</view>
			</view>
		</view>
		<view class="team-con">
			<view class="team-title">手动添加</view>
			<view class="team-con-from">
				<view class="team-con-from_li">
					<view>设 备 ID ：</view>
					<view style="padding-left: 16rpx;"><input type="text" placeholder="请输入设备ID" v-model="ID"/></view>
				</view>
				<view class="team-con-from_li">
					<view class="team-con-from_li_name">姓     名：</view>
					<view><input type="text" placeholder="请输入联系人姓名" v-model="name"/></view>
				</view>
				<view class="team-con-from_li">
					<view class="team-con-from_li_name">电     话：</view>
					<view><input type="text" placeholder="请输入手机号码或固定号码" v-model="phone"/></view>
				</view>
				<view class="team-con-from_li1">
					<view class="team-con-from_li_name">地     址：</view>
					<view><input type="text" :placeholder='address|| "支持地图上定位"' v-model="address"/></view>
					<view class="team-con-from_li_img" @click="map"><image src="../../static/images/guide.png"></image></view>
				</view>
				<view class="team-con-from_li" style="border: 0;">
					<view class="team-con-from_li_name">备     注：</view>
					<view><input type="text" placeholder="选填" v-model="remarks"/></view>
				</view>
			</view>
		</view>
		<view class="button">保存</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/index.vue'
	export default {
		components: {uniSearchBar},
		data() {
			return {
				bgColor:'#FFFFFF',
				ID:'',
				name:'',
				phone:'',
				address:'',
				remarks:'',
				latitude:'',
				longitude:'',
			}
		},
		onLoad(option) {
			
		},
		methods: {
			search(e){
				
			},
			cancel(e){
			},
			map(){
				let _this=this;
				uni.chooseLocation({
				    success: function (res) { 
						_this.address = res.address;
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
				    }
				});
			},
			qrCode(){
				uni.scanCode({
					success: res => {
						this.$myRuquest({
							url: "/jsl/user/addEquipment",
							data: {
								"requestParams": {
									"procedure": {
										"p_package_no": res.result,
										"p_uid": this.$utils.getData("p_uid"),
										"p_imei_no": res.result,
										"private_phone": ""
									}
								}
							}
						}).then(responses => {
							uni.showToast({
								title: "新设备添加成功"
							})
						})
					}
				});
			},
				
		}
	}
</script>

<style lang="scss">
	.team-container{
		// margin: 11rpx 0;
	}
	.addTeam-container{
		background-color: rgb(243,243,243);
		min-height: 100vh;
	}
    .team-container .uni-searchbar{
          background-color: rgb(243,243,243);
	}
	.team-nav{
		 background-color: #FFFFFF;
		 display: flex;flex-direction:row; flex-wrap:wrap;justify-content:flex-start; display: -webkit-flex;
	}
	.team-nav image{
		width: 44rpx;height: 44rpx;margin-left: 36rpx;margin-top: 38rpx;
	}
	.team-nav_right{
		padding: 19rpx 16rpx;
	}
	.team-nav_right view:nth-child(1){
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}
	.team-nav_right view:nth-child(2){
		padding-top: 10rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #666666;
	}
	.team-con .team-title{
		padding: 15rpx 21rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}
	.team-con-from{
		background: #FFFFFF;
	}
	.team-con-from_li{
		 display: flex;flex-direction:row; flex-wrap:wrap;justify-content:flex-start; display: -webkit-flex;
		 line-height: 96rpx;
		 border-bottom: 1px solid #DADADA;
		 padding: 0 25rpx;
		 font-size: 28rpx;
		 font-weight: 500;
		 color: #333333;
	}
	.team-con-from_li view:nth-child(1){
		
	}
	.team-con-from_li_name{
		letter-spacing: 16rpx;
	}
	.team-con-from_li view:nth-child(2){
		width: 70%;
	}
	.team-con-from_li view:nth-child(2) input{
		line-height: 96rpx;
		height: 96rpx;
		font-size: 28rpx;
	}
	.team-con-from_li1{
		 display: flex;flex-direction:row; flex-wrap:wrap;justify-content:flex-start; display: -webkit-flex;
		 line-height: 96rpx;
		 border-bottom: 1px solid #DADADA;
		 padding: 0 25rpx;
		 font-size: 28rpx;
		 font-weight: 500;
		 color: #333333;
	}
	.team-con-from_li1 view:nth-child(2){
		width: 68%;
	}
	.team-con-from_li1 view:nth-child(2) input{
		line-height: 96rpx;
		height: 96rpx;
		font-size: 28rpx;
	}
	.team-con-from_li_img image{
		width: 40rpx;height: 40rpx;margin-top: 30rpx;display: block;margin-left: 14rpx;
	}
	.button{
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		background: #21C885;
		border-radius: 8rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		position: fixed;
		bottom: 50rpx;
		left: 5%;
	}
</style>
